Quasar is a popular Vue UI library for developing good looking Vue apps.
In this article, we’ll take a look at how to create Vue apps with the Quasar UI library.
Active List Items
We can add active list items by adding the active prop to the q-item component:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
<style>
.example-item {
height: 200px;
width: 200px;
}
</style>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<q-list>
<q-item clickable v-ripple active active-class="text-orange">
<q-item-section avatar>
<q-icon name="signal_wifi_off"></q-icon>
</q-item-section>
<q-item-section>Active</q-item-section>
<q-item-section side>Side</q-item-section>
</q-item>
<q-item
clickable
v-ripple
active
active-class="bg-teal-1 text-grey-8"
>
<q-item-section avatar>
<q-icon name="signal_wifi_off"></q-icon>
</q-item-section>
<q-item-section>Active class</q-item-section>
<q-item-section side>Side</q-item-section>
</q-item>
</q-list>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app"
});
</script>
</body>
</html>
The active prop makes the list item active.
active-class is set to style the active list item.
The q-item-label component lets us add text into our list item:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
<style>
.example-item {
height: 200px;
width: 200px;
}
</style>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<q-list>
<q-item>
<q-item-section top avatar>
<q-avatar
color="primary"
text-color="white"
icon="bluetooth"
></q-avatar>
</q-item-section>
<q-item-section>
<q-item-label>Single line item</q-item-label>
<q-item-label caption lines="2">
Secondary line text
</q-item-label>
</q-item-section>
<q-item-section side top>
<q-item-label caption>5 min ago</q-item-label>
<q-icon name="star" color="yellow"></q-icon>
</q-item-section>
</q-item>
</q-list>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app"
});
</script>
</body>
</html>
Markup Table
We can add a table with the q-markup-table component.
For instance, we can write:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
<style>
.example-item {
height: 200px;
width: 200px;
}
</style>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<q-markup-table>
<template>
<thead>
<tr>
<th class="text-left">Dessert (100g serving)</th>
<th class="text-right">Calories</th>
<th class="text-right">Fat (g)</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-left">Frozen Yogurt</td>
<td class="text-right">159</td>
<td class="text-right">6</td>
</tr>
<tr>
<td class="text-left">Ice cream</td>
<td class="text-right">237</td>
<td class="text-right">9</td>
</tr>
</tbody>
</template>
</q-markup-table>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app"
});
</script>
</body>
</html>
The template tag is needed with the UMD build to display the table correctly.
This is because the browser parses the HTML before Vue can render the table.
Conclusion
We can highlight active list items and add tables with our own markup with Quasar.
